<script type="text/javascript">
    var currentActivityId = <?= ($this->activityId) ? $this->activityId : 0 ?>;
    var t;
    function activarTimer(){
        getTasks(currentActivityId);
        setTimeout("activarTimer()", 5000);
    }
    
    $(function(){
        activarTimer();
        
        $( "#activitiesFilter" ).autocomplete({
            source: function( request, response ) {
                $.ajax({
                    url: "http://localhost/PersonalTask/public/Activity/searchService/",
                    dataType: "json",
                    data: {
                        query: request.term
                    },
                    success: function( data ) {
                        response( $.map( data.activities, function( item ) {
                            return {
                                label: item.name,
                                value: item.name,
                                activityId: item.idactivities
                            }
                        }));
                    }
                });
            },
            minLength: 1,
            select: function( event, ui ) {
                currentActivityId = ui.item.activityId;
                getTasks(currentActivityId);
            },
            open: function() {},
            close: function() {}
        });
        
        $("#modalSave").click(function(){
            saveTask();
        });
        
    });
    
    function updateTasksTimer() {
        
    }
    
    function saveTask() {
        $.getJSON("http://localhost/PersonalTask/public/Task/save/",
        {
            name: $("#name").attr("value"),
            planned_time: $("#planned_time").attr("value"),
            id_activity: currentActivityId
        },
        function(data) {
            if (data.error) {
                alert(data.message);
            } else {
                getTasks(currentActivityId);
                $("#name").attr("value", "");
                $("#planned_time").attr("value", "")
            }
        });
    }
    var percentage = 0;
    function getTasks(activityId) {
        $.getJSON("http://localhost/PersonalTask/public/Activity/monitorService/",
        {
            id: activityId
        },
        function(data) {
            $("#tasksContent").empty();
            $.each(data.tasks, function(i,item){
                status = item.status;
                statusClass = "";
                statusName = "";
                if (status == "1") {
                    statusName = "Nuevo";
                } else if (status == "2") {
                    statusClass = "active"
                    statusName = "En Progreso";
                } else if (status == "3") {
                    statusName = "En Pausa";
                }
                progressClass = "";
                if (80 <= item.percentage && item.percentage <= 100) {
                    progressClass = "progress-warning"
                } else if (item.percentage > 100) {
                    progressClass = "progress-danger"
                }
                
                $("#tasksContent").append(
                    "<tr>" +
                        "<td>" + item.nombre + "</td>" +
                        "<td>" + statusName + "</td>" +
                        "<td>" + item.planned_time + "</td>" +
                        "<td>" +
                            "<div class='progress " + progressClass + " progress-striped " + statusClass + "'><div class='bar' style='width: " + item.percentage + "%;'></div></div>" +
                            //"<div class='progress progress-striped " + statusClass + "'><div class='bar' style='width: " + (percentage++) + "%;'></div></div>" +
                            "<a href='#' class='btn btn-mini btn-success' id='play-" + item.idtasks + "'>Play</a>&nbsp;" +
                            "<a href='#' class='btn btn-mini btn-warning' id='pause-" + item.idtasks + "'>Pause</a>&nbsp;" +
                            "<a href='#' class='btn btn-mini btn-danger' id='stop-" + item.idtasks + "'>Stop</a>" +
                        "</td>" +
                    "<tr>"
                );
                
                $("#play-" + item.idtasks).live("click", function(){
                    playTask(item.idtasks);
                });
                
                $("#pause-" + item.idtasks).live("click", function(){
                    pauseTask(item.idtasks);
                });
                
                $("#stop-" + item.idtasks).live("click", function(){
                    stopTask(item.idtasks);
                });
                
            });
        });
    }
    
    function playTask(taskId) {
        upadteStatus("set-status-en-progreso", taskId);
    }
    
    function pauseTask(taskId) {
        upadteStatus("set-status-pause", taskId);
    }
    
    function stopTask(taskId) {
        upadteStatus("set-status-cancelar", taskId);
    }
    
    function upadteStatus(action, taskId) {
        $.getJSON("http://localhost/PersonalTask/public/Task/" + action + "/",
        {
            id: taskId
        },
        function(data) {
            getTasks(currentActivityId);
        });
    }
    
</script>

<h1>Monitoreo</h1>
<p class="lead"></p>
<div class="well">
    <form id="" class="wform-search span8">
        <input id="activitiesFilter" type="text" class="input-medium search-query" placeholder="Buscar Actividades" name="query"/>
    </form>
    <a href="#myModal" data-toggle="modal" class="btn btn-primary pull-right">Agregar Tarea</a>
    
    <table class="table table-bordered table-striped">
        <thead>
            <tr>
                <th>Nombre</th>
                <th>Estado</th>
                <th>Tiempo Estimado</th>
                <th>Opciones</th>
            </tr>
        </thead>
        <tbody id="tasksContent">
            
        </tbody>
        
    </table>
    
</div>

<div class="modal hide fade in" id="myModal">
    <div class="modal-header">
        <button class="close" data-dismiss="modal">×</button>
        <h3>Agregar tarea</h3>
    </div>
    <div class="modal-body">
        <table>
            <tr>
                <td>Nombre</td>
                <td><input type="text" id="name"/></td>
            </tr>
            <tr>
                <td>Tiempo Planeado</td>
                <td><input type="text" id="planned_time"/></td>
            </tr>
        </table>
    </div>
    <div class="modal-footer">
        <a id="modalCancel" href="#" class="btn" data-dismiss="modal">Cancelar</a>
        <a id="modalSave" href="#" class="btn btn-primary" data-dismiss="modal">Guardar</a>
    </div>
</div>